import React, { useEffect, useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom'
import { Select, Input, Table, Radio, Tag, Switch, message, Modal } from 'antd';
import { getMngTeam } from '../../api/zheng/index'
import { ExclamationCircleFilled } from '@ant-design/icons'
import '../../styles/zheng/MenageTeam.scss'
import { getMngtable, patchMngtable, deleteTeam } from '../../api/zheng/index.js'
interface Props {

}

const { Search } = Input;
const { confirm } = Modal;
function MenageTeam(props: Props) {
    var navigate = useNavigate()
    var [truelist, setTruelist] = useState([])
    var [list, setList] = useState([])
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    var [options, setOptions] = useState([])
    var [loading, setLoading] = useState(false)
    var [pagination, setPagination] = useState({ current: 1, pageSize: 5, total: 100 })
    const [messageApi, contextHolder] = message.useMessage()

    // 挂载期
    useEffect(() => {
        getMngTeam().then(res => {
            var arr = res.data.map((item: any) => {
                return { value: item.id, label: item.name }
            })
            setOptions(arr)
        })
        getMngtable().then(res => {
            setLoading(false)
            console.log(res);
            setList(res.data)
            setPagination({
                ...pagination, total: res.data.length
            })
        })
    }, [])
    // 点击搜索的时候
    const onSearch = (value: string) => {
        getMngtable().then(res => {
            var arr = res.data.filter((item: any) => {
                return item.teamname.indexOf(value) != -1
            })
            setList(arr)
        })
    }
    // 多选
    const rowSelection = {
        onChange: (selectedRowKeys: any, selectedRows: any) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            setTruelist(selectedRowKeys)
        }
    }
    // 改变状态
    const onChange = (checked: any, item: any) => {
        patchMngtable({ ...item, states: checked }).then((res: any) => {
            console.log(res);

        })
    }
     // 分页发生改变后执行
     const handleChange = (pagi:any) =>{
        setPagination(pagi) //更新页码
        setLoading(true)
        // 请求新的页码对应的数据
        getMngtable().then(res=>{
            setLoading(false)
            setPagination({
                    ...pagi,total:res.data.length
                })
        })
    }
    // 点击删除
    const showConfirm = (id: any) => {
        confirm({
            title: '解散确认',
            icon: <ExclamationCircleFilled />,
            content: '确定解散此团队吗?',
            okText: "确认",
            cancelText: "取消",
            onOk() {
                deleteTeam({ id }).then(res => {
                    if (res.status == 200) {
                        messageApi.open({
                            type: 'success',
                            content: '退队成功',
                        });
                        setTimeout(() => {
                            navigate(0)
                        }, 500)
                    }
                })
            },
            onCancel() {
                console.log('已取消');

            },
        });
    }
    // 表格
    const columns = [
        {
            title: '编号', //表格头的标题
            dataIndex: 'id', //数据索引，决定通过哪个属性名（字段名）获取数据
            key: 'id',
        },
        {
            title: '头像',
            dataIndex: 'avatar',
            key: 'avatar',
            render: (_: any, record: any) => {
                return (
                    <img src={record.avatar} />
                )
            }
        },
        {
            title: '团队名称',
            dataIndex: 'teamname',
            key: 'teamname',
        },
        {
            title: '团队长',
            dataIndex: 'leader',
            key: 'leader',
        },
        {
            title: '团队标签',
            dataIndex: 'tags',
            key: 'tags',
            render: (_: any, record: any) => (
                <Tag color={record.tags === "冠心病" ? 'geekblue' : 'orange'} style={{ borderRadius: '20px', border: 'none' }}> {record.tags} </Tag>
            ),
        },
        {
            title: '所属机构',
            dataIndex: 'oforg',
            key: 'oforg',
        },
        {
            title: '签约人数',
            dataIndex: 'signnum',
            key: 'signnum',
        },
        {
            title: '评分',
            dataIndex: 'score',
            key: 'score',
        },
        {
            title: '状态',
            dataIndex: 'states',
            key: 'states',
            render: (_: any, record: any) => {
                return (
                    <Switch checkedChildren="启用" unCheckedChildren="禁用" defaultChecked={record.states} onChange={(checked, item) => { onChange(checked, record) }} />
                )
            }
        },
        {
            title: '操作',
            dataIndex: 'handle',
            key: 'handle',
            render: (_: any, record: any) => { //动态渲染当前列的数据，和dataIndex有冲突
                return (
                    <>
                        <NavLink to='/index/info-team-teamdetail' state={record.id}>查看详情</NavLink>
                        <a className='delete' onClick={(id) => { showConfirm(record.id) }}>解散退队</a>
                    </>
                )
            }
        },
    ]
    return (
        <div className='menageteam'>
            <div className="select">
                <span className='about'>所属机构</span>
                <div className="sleft">
                    <Select
                        defaultValue="请选择"
                        style={{ width: 200 }}
                        options={options}
                    />
                </div>
                <Search placeholder="请输入团队名称" onSearch={onSearch} style={{ width: 300 }} />
            </div>
            <Radio.Group
                onChange={({ target: { value } }) => {
                    setSelectionType(value);
                }}
                value={selectionType}
            >
            </Radio.Group>
            <Table
                rowSelection={{
                    type: selectionType,
                    ...rowSelection,
                }}
                dataSource={list}
                pagination={pagination}
                onChange={(pagi) => { handleChange(pagi) }}
                loading={loading}
                columns={columns} />
        </div>
    );
}

export default MenageTeam;